<template>
	<div class="view">
		
		<div class="logo-view">
			<img class="logo" src="../../assets/logo.png">
		</div>
		
		<div class="user-view">
			<Dropdown 
				style="margin-left:10px;" 
				trigger="click"
				@on-click="click2Menu">
				
				<a href="javascript:void(0)" class="name">
					{{data == null ? '' : data.name}}
					<Icon type="arrow-down-b"></Icon>
				</a>
				
				<Dropdown-menu slot="list">
					<Dropdown-item 
						name="set">
						<span style="font-size: 14px">
							个人设置
						</span>
					</Dropdown-item>
					<Dropdown-item 
						name="logout">
						<span style="font-size: 14px">
							退出登录
						</span>
					</Dropdown-item>
				</Dropdown-menu>
				
			</Dropdown>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['data'],
		data() {
			return {}
		},
		methods: {
			click2Menu(name) {
				if(name == 'logout') {
					this.$store.commit('clearAccount');
					this.$router.replace({
						name: 'accountLogin'
					});
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.view {
	}
	
	.logo-view {
		height: 60px;
		padding-top: 15px;
		padding-bottom: 15px;
		margin-left: 45px;
		display: inline-block;
	}
	
	.logo-view .logo {
		display: block;
		height: 30px;
		margin: auto;
	}
	
	.user-view {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		float: right;
		margin-right: 100px;
		height: 40px;
		margin-top: 10px;
		line-height: 40px;
	}
	
	.user-view .name {
		font-size: 15px;
		color: #FFF;
	}
</style>